<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>修改博客</title>
    <link rel="stylesheet" th:href="@{./css/bootstrap.min.css}">
    <script th:src="@{./js/jquery.js}"></script>
    <script th:src="@{./js/jquery.min.js}"></script>
    <script th:src="@{./js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{./js/bootstrap.min.js}"></script>

    <script type="text/javascript" charset="utf-8" th:src="@{ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{ueditor.all.js}"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" th:src="@{lang/zh-cn/zh-cn.js}"></script>

    <style type="text/css">
        div {
            width: 100%;
        }
    </style>

</head>
<style>
    .intro {
        /* width: 100%; */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    a:hover {
        text-decoration: none
    }
</style>

<body>
<div class="container" style="width: 1000px">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="/">去首页</a>
                        </li>
                        <li>
                            <a href="/personal">个人中心</a>
                        </li>
                        <li>
                            <a href="/myBlog">我的博客列表</a>
                        </li>
                        <li class="active">
                            <a href="/writeBlog">写博客</a>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li th:if="${user}==null">
                            <a href="/loginPage">登录</a>
                        </li>
                        <li th:if="${user}!=null">
                            <a href="#">个人中心</a>
                        </li>
                        <li th:if="${user}!=null">
                            <a th:text="'欢迎：'+${user.username}"> </a>
                        </li>
                        <li class="dropdown" th:if="${user}!=null">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">设置<strong
                                    class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">个人信息</a>
                                </li>
                                <li>
                                    <a href="logout">退出</a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>


        </div>
    </div>

    <div>
            <div style="width: 800px;margin: auto">
                <h3>修改文章</h3>
                <div style="height: 60px;margin-bottom: 20px">
                    <label style="font-size: 18px">题目：</label>
                    <input type="text" id="title" name="title" required="required" class="form-control" th:value="${blog.title}">
                    <input id="id" name="title" required="required" class="form-control" th:value="${blog.id}" type="hidden" readonly unselectable="on">
                </div>
                <div style="height: 60px;margin-bottom: 20px">
                    <label style="font-size: 18px">摘要：</label>
                    <input type="text" id="description" name="description" required="required" class="form-control" th:value="${blog.description}">
                </div>
                <script id="editor"  th:utext="${blog.content}" name="content" required="required" type="text/plain" style="width:800px;height:500px;"></script>
                <button   id="add" class="btn btn-info">确定</button>
            </div>
    </div>

</div>
</body>
</html>


<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    var btn = document.getElementById("add");
    btn.onclick = function () {
        var content =UE.getEditor('editor').execCommand( "getlocaldata" )
        var title = document.getElementById("title").value;
        var description = document.getElementById("description").value;
        var id = document.getElementById("id").value;
       if (title.length < 1 || title.length > 100) {
           alert("标题在1-100字之间")
       } else if (description.length < 1 || description.length > 100) {
           alert("摘要在1-100字之间")
       } else if (id=='' ) {
           alert("id没有了！！")
       } else if (content.length < 1 || content.length > 100000) {
           alert("内容在1-100000字之间")
       }else {
           var m = { "id": id, "content": content, "title": title,  "description": description, };
           // alert(JSON.stringify(m));
           $.ajax({
               type: "POST",
               async: false,
               url: "/editBlog",
               dataType: "json",
               contentType: "application/json; charset=utf-8",
               data: JSON.stringify(m),
               success: function (data) {
                   console.log(data)
                    if (data=="nologin"){
                        window.location.href="./login";
                    }else if (data=="succeed"){
                        window.location.href="/myBlog";
                    }else {
                        alert("添加博客失败！")
                    }
               },
               error: function (data) {
                   alert("操作失败 ")
               }
           })
       }

   }

</script>